<template>
    <div v-loading="loading" class=" w-full h-full bg-white px-2" style="overflow: auto;">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="云效助手" name="first">
                <div>

                    <el-input v-model="input1" placeholder="Please input" @keyup.enter="ok">
                        <template #append>
                            <el-button type="primary" @click="ok()">确定</el-button>
                        </template>
                    </el-input>
                </div>
                <div>
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <aside v-show="isShow"
                                class="bg-black text-white p-6 rounded-lg w-full max-w-lg font-mono mt-2">
                                <div class="flex justify-between items-center">
                                    <div class="flex space-x-2 text-blue-500">
                                        需求
                                    </div>
                                    <p class="text-sm" @click="copy(result.req)">复制</p>
                                </div>
                                <div class="mt-4">
                                    <p style="word-break:break-all" class=" overflow-ellipsis">
                                        <el-link :href="result.req" target="_blank" type="primary">{{ result.req
                                            }}</el-link>
                                    </p>
                                </div>
                            </aside>
                            <aside v-show="isShow"
                                class="bg-black text-white p-6 rounded-lg w-full max-w-lg font-mono mt-2">
                                <div class="flex justify-between items-center">
                                    <div class="flex space-x-2 text-red-500">
                                        BUG
                                    </div>
                                    <p class="text-sm" @click="copy(result.bug)">复制</p>
                                </div>
                                <div class="mt-4">
                                    <p style="word-break:break-all" class=" overflow-ellipsis">
                                        <el-link :href="result.bug" target="_blank" type="danger">{{ result.bug
                                            }}</el-link>
                                    </p>
                                </div>
                            </aside>
                            <aside v-show="isShow"
                                class="bg-black text-white p-6 rounded-lg w-full max-w-lg font-mono mt-2">
                                <div class="flex justify-between items-center">
                                    <div class="flex space-x-2 text-white">
                                        GitLab
                                    </div>

                                </div>
                                <div class="mt-4">
                                    <p style="word-break:break-all" class=" overflow-ellipsis">
                                        <el-link href="http://47.104.21.5" target="_blank">http://47.104.21.5</el-link>
                                    </p>
                                    <p style="word-break:break-all" class=" overflow-ellipsis">
                                        账号：zhangteng
                                    </p>
                                    <p style="word-break:break-all" class=" overflow-ellipsis">
                                        密码：zt04985807
                                    </p>
                                </div>
                            </aside>
                            <aside v-show="isShow"
                                class="bg-black text-white p-6 rounded-lg w-full max-w-lg font-mono mt-2">
                                <div class="flex justify-between items-center">
                                    <div class="flex space-x-2 text-white">
                                        API接口查询
                                    </div>

                                </div>
                                <div class="mt-4">
                                    <p style="word-break:break-all" class=" overflow-ellipsis">
                                        <el-link href="http://192.168.1.92/api/#/home/project/api/"
                                            target="_blank">http://192.168.1.92/api</el-link>
                                    </p>
                                    <p style="word-break:break-all" class=" overflow-ellipsis">
                                        账号：zhangteng
                                    </p>
                                    <p style="word-break:break-all" class=" overflow-ellipsis">
                                        密码：123456
                                    </p>
                                </div>
                            </aside>
                        </el-col>
                        <el-col :span="12">
                            <aside v-show="isShow"
                                class="bg-black text-white p-6 rounded-lg w-full max-w-lg font-mono mt-2">
                                <div class="flex justify-between items-center">
                                    <div class="flex space-x-2 text-green-500">
                                        GIT常规操作
                                    </div>
                                    <!-- <p class="text-sm" @click="copy(result.bug)">复制</p> -->
                                </div>
                                <div class="mt-4">
                                    <p style="word-break:break-all" class="mt-4 overflow-ellipsis">
                                        git checkout -b {{ input1 }} <span class="text-gray-500"
                                            @click="copy(`git checkout -b ${input1}`)">//创建分支</span>
                                    </p>
                                    <p style="word-break:break-all" class="mt-4 overflow-ellipsis">
                                        git checkout testing <span class="text-gray-500"
                                            @click="copy(`git checkout testing`)">//切换测试分支</span>
                                    </p>
                                    <p style="word-break:break-all" class="mt-4 overflow-ellipsis">
                                        git pull <span class="text-gray-500" @click="copy(`git pull`)">//先拉取最新</span>
                                    </p>
                                    <p style="word-break:break-all" class="mt-4 overflow-ellipsis">
                                        git merge {{ input1 }} <span class="text-gray-500"
                                            @click="copy(`git merge ${input1}`)">//在合并分支</span>
                                    </p>
                                    <p style="word-break:break-all" class="mt-4 overflow-ellipsis">
                                        git push <span class="text-gray-500" @click="copy(`git push`)">//最后提交</span>
                                    </p>
                                </div>
                            </aside>
                            <aside v-show="isShow"
                                class="bg-black text-white p-6 rounded-lg w-full max-w-lg font-mono mt-2">
                                <div class="flex justify-between items-center">
                                    <div class="flex space-x-2 text-yellow-500">
                                        HIS系统常用账号
                                    </div>
                                    <!-- <p class="text-sm" @click="copy(result.bug)">复制</p> -->
                                </div>
                                <div class="mt-4">
                                    <p style="word-break:break-all" class="mt-4 overflow-ellipsis">
                                        gfts 123456 <span class="text-gray-500">//HIS 医生账号</span>
                                    </p>
                                    <p style="word-break:break-all" class="mt-4 overflow-ellipsis">
                                        Qwer123456 Qwer123456 <span class="text-gray-500">//HIS 医助账号</span>
                                    </p>
                                    <p style="word-break:break-all" class="mt-4 overflow-ellipsis">
                                        miaomajun Ma123123 <span class="text-gray-500">//HIS 药房账号</span>
                                    </p>
                                    <p style="word-break:break-all" class="mt-4 overflow-ellipsis">
                                        majun Ma123123 <span class="text-gray-500">//HIS 药房账号</span>
                                    </p>
                                </div>
                            </aside>
                        </el-col>
                    </el-row>
                </div>
            </el-tab-pane>

            <el-tab-pane label="变量助手" name="third">
                <div>

                    <el-input v-model="input2" placeholder="Please input 变量内容" @keyup.enter="fy">
                        <template #append>
                            <el-button type="primary" @click="fy()">确定</el-button>
                        </template>
                    </el-input>
                </div>
                <div>
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <aside v-if="fyresult.translatedText"
                                class="bg-black text-white p-6 rounded-lg w-full max-w-lg font-mono mt-2">
                                <div class="flex justify-between items-center">
                                    <div class="flex space-x-2 text-blue-500">
                                        结果
                                    </div>
                                    <!-- <p class="text-sm" @click="copy(result.req)">复制</p> -->
                                </div>
                                <div class="mt-4">
                                    <p style="word-break:break-all" class=" overflow-ellipsis"
                                        @click="copy(fyresult.translatedText)">
                                        {{ fyresult.translatedText }}
                                    </p>

                                    <hr class="mt-4">
                                    <p v-for="o in fyresult.alternatives" :key="o" style="word-break:break-all"
                                        class="mt-4 overflow-ellipsis" @click="getCode(convertCase(o).camelCase)">
                                        {{ o }}
                                    </p>


                                </div>
                            </aside>
                            <aside v-if="fyresult.translatedText"
                                class="bg-black text-white p-6 rounded-lg w-full max-w-lg font-mono mt-2">
                                <div class="flex justify-between items-center">
                                    <div class="flex space-x-2 text-blue-500">
                                        变量命名
                                    </div>
                                    <!-- <p class="text-sm" @click="copy(result.req)">复制</p> -->
                                </div>
                                <div class="mt-4">

                                    <p style="word-break:break-all" class="mt-4 overflow-ellipsis">
                                        {{ convertCase(fyresult.translatedText).caseInit }} <span class="text-gray-500"
                                            @click="copy(convertCase(fyresult.translatedText).caseInit)">//普通</span>
                                    </p>
                                    <p style="word-break:break-all" class="mt-4 overflow-ellipsis">
                                        {{ convertCase(fyresult.translatedText).camelCase }} <span class="text-gray-500"
                                            @click="copy(convertCase(fyresult.translatedText).camelCase)">//小驼峰</span>
                                    </p>

                                    <p style="word-break:break-all" class="mt-4 overflow-ellipsis">
                                        {{ convertCase(fyresult.translatedText).PascalCase }} <span
                                            class="text-gray-500"
                                            @click="copy(convertCase(fyresult.translatedText).PascalCase)">//大驼峰</span>
                                    </p>


                                </div>
                            </aside>
                        </el-col>
                        <el-col :span="12">
                            <aside v-for="o in fyresult.codes" :key="o"
                                class="bg-black text-white p-6 rounded-lg w-full max-w-lg font-mono mt-2">
                                <div class="flex justify-between items-center">
                                    <div class="flex space-x-2 text-blue-500">
                                        {{ o.title }}
                                    </div>
                                    <!-- <p class="text-sm" @click="copy(result.req)">复制</p> -->
                                </div>
                                <div class="mt-4">

                                    <p style="word-break:break-all" class=" mt-4 overflow-ellipsis">
                                        <highlightjs language='javascript' :code="o.code" class='sel' />


                                    </p>



                                </div>
                            </aside>

                        </el-col>
                    </el-row>
                </div>
            </el-tab-pane>
            <el-tab-pane label="API" name="fourth">
                <api></api>
            </el-tab-pane>
            <el-tab-pane label="test" name="five">
                <el-button type="primary" @click="test">测试</el-button>
            </el-tab-pane>
        </el-tabs>
        <div class="h-10"></div>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useRoute } from 'vue-router';
import ax from '@/helper/axios.js'
import api from '@/view/system/API.vue'
import { ElMessage } from 'element-plus'
import md5 from 'js-md5';
// import { xxx } from '@/api/index.js';
// const showToast = inject("showToast");
const loading = ref(true)
loading.value = false;
const isShow = ref(false)
const activeName = ref('first')
const input1 = ref('YHTO-16')
const input2 = ref('')
const result = ref({})
const fyresult = ref({})

function test() {
    ElMessage(btoa(md5('zt04985807')));
   
}
function ok() {
    result.value.req = 'https://devops.aliyun.com/projex/req/' + input1.value;
    result.value.bug = 'https://devops.aliyun.com/projex/bug/' + input1.value;

    isShow.value = true;
}
async function fy() {
    //判断input2.vulue是否是汉字
    if (/^[\u4e00-\u9fa5]+$/.test(input2.value)) {


        var r = await ax.post(`/fy/translate`, {
            q: input2.value,
            source: "zh",
            target: "en",
            format: "text",
            alternatives: 5,
            api_key: ""
        });
        fyresult.value = r;
        getCode(convertCase(fyresult.value.translatedText).camelCase)
    } else {
        getCode(input2.value)
    }
}
function getCode(param) {
    fyresult.value.codes = [];
    fyresult.value.codes.push({
        title: '接口调用', code: `
    apiFunction({ id: value }).then((res) => {
        ${param}.value = res.data
    });`});
    fyresult.value.codes.push({
        title: '集合遍历', code: `
    ${param}.forEach(function(item,index) {
        console.log(item); 
    });


    v-for="(o,i) in ${param}" :key="o"
    `});
    fyresult.value.codes.push({
        title: 'Jquery取值', code: `
        $('#${param}).val()
        $('#${param}).html();
        $('.${param}).val();
        $('.${param}).html()
    `});
}

function convertCase(input) {
    // 将字符串转换为数组，以空格、逗号等分隔符分割
    const words = input.split(/[-_\s]+/);

    // 转换为小驼峰
    const camelCase = words.map((word, index) =>
        index === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
    ).join('');

    // 转换为大驼峰
    const PascalCase = words.map(word =>
        word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
    ).join('');
    const caseInit = input.replace(/ /g, '_');

    return { camelCase, PascalCase, caseInit };
}
function copy(value) {
    const el = document.createElement('textarea'); // 创建一个临时的 textarea 元素
    el.value = value; // 设置 textarea 的值为要复制的文本
    document.body.appendChild(el); // 将 textarea 添加到文档中
    el.select(); // 选择 textarea 中的文本
    document.execCommand('copy'); // 执行浏览器的复制命令
    document.body.removeChild(el); // 从文档中移除 textarea
    ElMessage('复制成功')

}
onMounted(() => { });
</script>
<style>
.el-tabs__item.is-active,
.el-tabs__item:hover {
    color: var(--el-color-primary) !important;
}

.el-tabs__item.is-active {
    color: var(--el-color-primary) !important;
}

.sel {
    -moz-user-select: text !important;
    /*火狐*/
    -webkit-user-select: text !important;
    /*webkit浏览器*/
    -ms-user-select: text !important;
    /*IE10*/
    -khtml-user-select: text !important;
    /*早期浏览器*/
    user-select: text !important;
}
</style>
<style scoped lang="less"></style>